<template>
    <div class="listBox">
        <van-nav-bar :title="this.$route.query.type"
            left-arrow
            @click-left="onClickLeft"/>
        <!-- 商品列表 -->
        <article @scroll="scrollEvt">
            <div class="productList" v-for="item in list" :key="item.id">
                <van-card :price="item.price + '.00'"
                    @click-thumb="toDetail(item.type)"
                    :title="item.name"
                    :thumb="item.img" >
                    <template #tags>
                        <van-tag plain type="danger">{{item.type}}</van-tag>
                    </template>
                    <template #footer>
                        <!-- 获取当前登录的用户，添加购物车 -->
                        <van-button size="normal" icon="shopping-cart-o" type="danger" round @click="addCart(item.id,item.price,item.name,item.img)">
                            加入购物车
                        </van-button>
                    </template>
                </van-card>
            </div>
            <!-- 只加载一页 -->
            <span class="getMore" v-show="!loading && !loadMore">加载更多</span>
            <span class="getMore" v-show="loading && !loadMore">加载中...</span>
            <span class="getMore" v-show="loading && loadMore">没有更多数据</span>
            <!-- <span class="getMore" v-show="loadFail">加载失败，请重新加载</span> -->
        </article>
    </div>
</template>

<script>
    import {addCartApi, clearListApi, foodListApi, medicalListApi} from '../../apis/listApis'
    import {} from '../../store'
    export default {
        data() {
            return {
                list:[],
                page:1,
                size:6,
                loading:false, //true表示正在加载中
                loadMore:true, //true表示还有数据
                // loadFail:false,
                userInfo:''
            }
        },
        
        mounted() {
            // 进入页面加载商品列表数据
            this.getList()
            // 得到登录用户数据
            // debugger;
            this.userInfo = this.$store.getters['common/userInfo'].id
        },
        methods:{
            getList(){
                Promise.all([
                    foodListApi({type:this.$route.query.type,page:this.page,size:this.size}),
                    clearListApi({type:this.$route.query.type,page:this.page,size:this.size}),
                    medicalListApi({type:this.$route.query.type,page:this.page,size:this.size})
                ]).then(arr => {
                    let _arr = arr.find(item => item.data.length >0).data
                    // 往下划拉需要拼接页面
                    this.list = this.page === 1? _arr : this.list.concat(_arr)
                    // 判断还有不有页面
                    this.loadMore = _arr.length <= this.size
                })
            },
            onClickLeft() {
                this.$router.go(-1)
            },

            async addCart(id,price,name,bgUrl){
                let res = await addCartApi({userId:this.userInfo, price, id, time:new Date(), count: 1,name, detailaddress:'address', bgUrl})
                if(res.code ===200) this.$toast('加购成功')
                // 禁止跳到下个界面TODO怎么做到，目前只有点了图片才能跳转

            },
            scrollEvt(evt){
                let isSend = ((evt.target.scrollTop + evt.target.clientHeight) - evt.target.scrollHeight) < 100
                if(isSend && this.loadMore && !this.loading){
                    this.loading =true
                    this.page += 1
                    this.getList()
                }
            },
            toDetail(type){

                this.$router.push('/details?type=' + type)

            }
        }
    }
</script>

<style lang="less" scoped>
    .listBox{
        height: 100%;
        article{
            height: calc(100% - 46px);
            overflow-x: hidden;
            .van-card{
                margin: 10px;
                border-radius: 6px;
                font-size: 16px;
            }
            .getMore{
                display: block;
                text-align: center;
                color: #9d9a9a;
            }
        }
    }
</style>